リンクのテクニック(1)
今週から3週にわたって、リンクの小技を紹介していきたいと思います。通常、リンクはAタグを使って作成しますが、これにちょっと手を加えてやると、効果的な演出を簡単に加えることができます。

→ ホームページへリンクする
 
まずは、ホームページへのリンクの作成です。ここでいうホームページとは、各訪問者がブラウザにホームページとして登録しているページを指します。要するに、ブラウザの[ホーム]ボタンをクリックしたときと同じ動作を行うリンクとなるわけです。当然、リンク先は訪問者ごとにバラバラ。こういうリンクも面白いのではないでしょうか? 作成方法はいたって簡単で、Aタグのhrefで指定するリンク先を「about:home」とするだけ。これで、ホームページへのリンクが作成できます。
以下のリンクをクリックすると…、<BR>
あなたのブラウザに登録されているホームページが表示されます。<BR>
<A href="about:home">ホームページへ</A>

→ リンクの説明を表示する
 
リンクを張る文字は、サイト名など端的な言葉で表現するのが普通ですが、これにもう少し説明を加えたい場合もあるでしょう。こういったときに利用できるのが、Aタグのtitle属性です。title属性に記述された内容は、リンク上にポインタを移動すると、ポップアップ表示されます。
<A href="http://www.infoseek.co.jp/" title="Webを検索するなら、やっぱりココ! 各種サービスも満載です!">
・infoseek</A>
<BR>
<A href="http://isweb.www.infoseek.co.jp/" title="50MBの無料HPスペース! オリジナルCGIも利用できます!">・isweb</A>
<BR>
<A href="http://iswebmag.hp.infoseek.co.jp/" title="ホームページの作成に行き詰ったときは、ここを参考にしよう!">・魅せるホームページ作成講座</A>
<BR>


→ リンクの文字を動かす
 
続いてはスタイルシートを使ったテクニックです。Aタグのスタイルシートを変更し、リンク上にポインタが来たら、その文字を少し右下に動かしてみましょう。画面に動きが出て効果的な演出を行えるようになります。やり方はとっても簡単で、HEAD内に「A:hover {position:relative; top:2; left:2}」というスタイルシートを記述するだけでOKです。なお、「top」「left」に続く数字で移動距離を変更できます。
<HTML>

<TITLE>インフォシーク ホームページ作成</TITLE>

<HEAD>
<STYLE type="text/css">
  <!-- A:hover {position:relative; top:2; left:2} -->
</STYLE>
</HEAD>

<BODY>
<A href="http://www.infoseek.co.jp/">・infoseek</A>
<BR><BR>
<A href="http://www.rakuten.co.jp/">・楽天</A>
<BR><BR>
<A href="http://isweb.www.infoseek.co.jp/">・isweb</A>
<BR><BR>
<A href="http://iswebmag.hp.infoseek.co.jp/">・魅せるホームページ作成講座</A>
<BR>
</BODY>

</HTML>


G|Cg|C@Amazon Yahoo yV

z[y[W yVoC[UNLIMIT1~] COiq COsI